<template>
  <div class="Homepage">
    <div class="head">
      <div class="logo">
        <div class="img">LOGO</div>
        <div class="logo_text">
          <div style="font-size:34px;font-weight:900"><b>高校内邮权力运行数据库网</b></div>
          <div>University Internal Power Running Database Network</div>
        </div>
      </div>
      <div class="head_btn">
        <div class="breadcrumb">
          <el-breadcrumb separator="|">
            <el-breadcrumb-item :to="{ path: '/' }">会员登录</el-breadcrumb-item>
            <el-breadcrumb-item>注册</el-breadcrumb-item>
            <el-breadcrumb-item>收藏本站</el-breadcrumb-item>
            <el-breadcrumb-item>设置首页</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="message">
          <i class="el-icon-s-promotion"
             style="font-size:12px">最新通知：此处是滚动信息栏，可以将最新的通知进行循环播放</i>
        </div>
      </div>
    </div>
    <div>
      <el-container>
        <el-header>
          <div class="daohang">
            <el-menu :default-active="activeIndex"
                     class="el-menu-demo"
                     mode="horizontal"
                     @select="handleSelect">
              <el-menu-item index="1">首页</el-menu-item>
              <el-menu-item index="2" @click="goB">学术动态</el-menu-item>
              <el-menu-item index="3" @click="goC">文献库</el-menu-item>
              <el-menu-item index="4">文件库</el-menu-item>
              <el-menu-item index="5">案例库</el-menu-item>
              <el-menu-item index="4">联系我们</el-menu-item>
              <el-menu-item index="5">关于我们</el-menu-item>
            </el-menu>
          </div>
          <template>
            <el-carousel indicator-position="outside">
              <el-carousel-item v-for="item in 4"
                                :key="item">
                <h3>{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
          </template>
        </el-header>
        <el-container>
          <el-main>
            <div class="main_two">
              <el-card class="one">
                <div class="side"></div>
                <div class="main_text">
                  <div style="color:rgb(7, 112, 25);font-weight:900;float:left">学术动态</div>
                  <div class="list">
                    <div class="list_img">
                      <div class="list_image">

                      </div>
                      <div class="list_text">
                        <div class="list_textcont">习近平总书记向全国广大高校进行节日的问候和诚挚的总结</div>
                        <div class="list_time">2021-9-9</div>
                      </div>
                    </div>
                    <div class="list_content">
                      <div class="list_text">
                        <div class="list_textcont">我校召开2021年线上管理工作大会的总结</div>
                        <div class="list_time1">2021-9-9</div>
                      </div>
                    </div>
                    <div class="list_content">
                      <div class="list_text">
                        <div class="list_textcont">实习课教室评价表</div>
                        <div class="list_time1">2021-9-9</div>
                        <div>
                          <el-link href="https://element.eleme.io"
                                   target="_blank"
                                   style="margin-top:60px;float:right">>>>More</el-link>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
              <el-card class="two">
                <div class="side1"></div>
                <div class="main_text">
                  <div style="display:flex;">
                    <div style="color:rgb(154, 215, 243);font-weight:900;float:left">文献库</div>
                    <div style="margin-top:5px;margin-left:160px">
                      <el-breadcrumb separator="|"
                                     style="font-color:rgb(134, 190, 223, 0.973)">
                        <el-breadcrumb-item :to="{ path: '/' }">国内文献库</el-breadcrumb-item>
                        <el-breadcrumb-item><a href="/">国内文献库</a></el-breadcrumb-item>
                      </el-breadcrumb>
                    </div>
                  </div>
                  <div class="list_content1">
                    <div><b>党建评：不作为就是不担当，有作为就要有担当</b></div>
                    <div>
                      <p style="text-align:left">“担当和作为是一体的，不作为就是不担当，有作为就要有担当。”</p>
                    </div>
                    <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-bottom:5px"></div>
                    <div><b>中美应该展现大格局肩负大担当</b></div>
                    <div>
                      <p style="text-align:left">中国国家主席习近平应约同美国总统拜登通电话，就中美关系和双方关心的有关问题进行了坦诚、深入、广泛的战略性沟通和交流。</p>
                    </div>
                    <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-bottom:5px"></div>
                    <div><b>人民艺评：《扫黑风暴》硬核亮剑，让正义抵达人心</b></div>
                    <div>
                      <p style="text-align:left">热血无畏、一心为公的刑警，誓将所有恶人与其保护伞绳之以法；中央督导组开展扫黑除恶，一桩失踪悬案却牵出更大谜团……《扫黑风暴》近日收官，这些震撼人心的场面依然萦绕在观众心头。</p>
                    </div>
                    <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-bottom:5px"></div>
                    <div>
                      <el-link href="https://element.eleme.io"
                               target="_blank"
                               style="margin-top:60px;float:right;margin-left:30px">>>>More</el-link>
                    </div>
                  </div>

                </div>
              </el-card>
            </div>
            <el-card class="main_one">
              <div class="side3"></div>
              <div class="main_text">
                <div style="display:flex;">
                  <div style="color:rgb(190, 44, 7);;font-weight:900;float:leftx">文件库</div>
                  <div style="margin-top:5px;margin-left:580px">
                    <el-breadcrumb separator="|"
                                   style="font-color:rgb(134, 190, 223, 0.973)">
                      <el-breadcrumb-item :to="{ path: '/' }">国家文件</el-breadcrumb-item>
                      <el-breadcrumb-item><a href="/">升级文件</a></el-breadcrumb-item>
                      <el-breadcrumb-item><a href="/">高校文件</a></el-breadcrumb-item>
                    </el-breadcrumb>
                  </div>
                </div>
                <div class="list_content1">
                  <div><b>中国GDP规模超过日本 正式成为世界第二大经济体</b></div>
                  <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-top:10px;margin-bottom:10px"></div>
                  <div><b>中国GDP规模超过日本 正式成为世界第二大经济体</b></div>
                  <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-top:10px;margin-bottom:10px"></div>
                  <div><b>中国GDP规模超过日本 正式成为世界第二大经济体</b></div>
                  <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-top:10px;margin-bottom:10px"></div>
                  <div><b>中国GDP规模超过日本 正式成为世界第二大经济体</b></div>
                  <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-top:10px;margin-bottom:10px"></div>
                  <div><b>中国GDP规模超过日本 正式成为世界第二大经济体</b></div>
                  <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-top:10px;margin-bottom:10px"></div>
                  <div><b>中国GDP规模超过日本 正式成为世界第二大经济体</b></div>
                  <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-top:10px;margin-bottom:10px"></div>
                  <div>
                    <el-link href="https://element.eleme.io"
                             target="_blank"
                             style="margin-top:60px;float:right;margin-left:30px">>>>More</el-link>
                  </div>
                </div>>
              </div>
            </el-card>
          </el-main>
          <el-aside width="480px">
            <div class="side2"></div>
            <div class="main_text">
              <div style="display:flex;">
                <div style="color:rgb(238, 207, 30);font-weight:900;float:left;margin-left:20px">案例库</div>
                <div style="margin-top:5px;margin-left:220px">
                  <el-breadcrumb separator="|"
                                 style="font-color:rgb(134, 190, 223, 0.973)">
                    <el-breadcrumb-item :to="{ path: '/' }">正面经验</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">负面案例</a></el-breadcrumb-item>
                  </el-breadcrumb>
                </div>
              </div>
              <div>
                <div style="display:flex;flex-direction: column;align-items: flex-start">
                  <div class="vedio"
                       style="margin-top:20px">
                    <img src="../../src/assets/04.jpg"
                         style="width:450px;height:250px;">
                  </div>
                  <div style="margin-top:40px;text-align:left"><b>人社部劳资所回应“中国行业收入差距扩至15倍”</b></div>
                  <div style="display:flex;margin-top:50px;flex-wrap: wrap;margin-left:50px">
                    <el-button type="primary"
                               plain
                               style="margin-left:10px">热门搜索一</el-button>
                    <el-button type="primary"
                               plain>热门搜索二</el-button>
                    <el-button type="primary"
                               plain>热门搜索三</el-button>
                    <el-button type="primary"
                               plain>热门搜索四</el-button>
                    <el-button type="primary"
                               plain>热门搜索五</el-button>
                    <el-button type="primary"
                               plain>热门搜索六</el-button>
                    <el-button type="primary"
                               plain>热门搜索七</el-button>
                  </div>
                  <div>
                    <el-link href="https://element.eleme.io"
                             target="_blank"
                             style="margin-top:60px;float:right;margin-left:30px">>>>More</el-link>
                  </div>
                </div>
              </div>
            </div>
          </el-aside>
        </el-container>
        <div class="footer">
          <div class="footer_text">
            <el-breadcrumb separator="|">
              <el-breadcrumb-item :to="{ path: '/' }">网站声明</el-breadcrumb-item>
              <el-breadcrumb-item><a href="/">联系我们</a></el-breadcrumb-item>
              <el-breadcrumb-item><a href="/">关于我们</a></el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div style="margin-left:550px;margin-top:10px;font-size:14px;font-weight:900">技术支持：天津职业技术师范大学 信息技术工程学院·软件工程学院 软件1901 李胜龙</div>
        </div>
      </el-container>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  methods: {
    goB () {
      // eslint-disable-next-line standard/object-curly-even-spacing
      this.$router.push({ 'path': '/first/tree'})
    },
    goC () {
      // eslint-disable-next-line standard/object-curly-even-spacing
      this.$router.push({ 'path': '/first/trees'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.Homepage {
  background-color: rgb(223, 235, 252);
  min-width: 1500px;
}

.head {
  display: flex;
  height: 200px;
}
.logo {
  display: flex;
  height: 100px;
  width: 45%;
  margin-top: 40px;
  margin-left: 40px;
}
.head_btn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  height: 100px;
  width: 40%;
  margin-top: 40px;
  margin-left: 200px;
  margin-right: 40px;
}
.img {
  margin-left: 40px;
  margin-top: 40px;
  margin-right: 20px;
  font-size: 25px;
  font-weight: bolder;
}
.logo_text {
  margin-top: 25px;
  width: 500px;
}
.breadcrumb {
  margin-top: 35px;
  margin-right: 40px;
  float: right;
}
.message {
  margin-top: 20px;
  margin-right: 40px;
}
.el-header {
  color: #333;
  text-align: center;
  height: 380px !important;
  margin-right: 80px;
}

.el-aside {
  background-color: rgb(255, 255, 255);
  color: #333;
  text-align: center;
  height: 900px;
  margin-left: 20px;
  margin-right: 60px;
  margin-top: 20px;
}

.el-main {
  background-color: rgb(223, 235, 252);
  color: #333;
  text-align: center;
  height: auto;
}
.daohang {
  height: 60px;
  width: 100%;
}
.el-menu {
  background-color: rgb(223, 235, 252);
  margin-left: 40px;
  margin-right: 40px;
  width: 100%;
  background-color: rgb(154, 215, 243);
}
.el-menu-item {
  margin-right: 10px;
  font-weight: 600;
  font-size: 18px;
  color: rgb(48, 46, 46);
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-image: url('../../src/assets/img.jpg');
  background-size: 100% 100%;
}
.el-carousel {
  width: 100%;
  margin-left: 40px;
  margin-right: 40px;
}
.main_two {
  display: flex;
  background-color: rgb(223, 235, 252);
  margin-left: 40px;
  height: 500px;
}
.main_one {
  margin-top: 30px;
  background-color: rgb(255, 255, 255);
  margin-left: 40px;
  height: 450px;
}
.one {
  background-color: rgb(255, 255, 255);
  width: 480px;
  height: 500px;
}
.two {
  background-color: rgb(255, 255, 255);
  width: 480px;
  height: 500px;
  margin-left: 40px;
}
.side {
  width: 100%;
  height: 5px;
  background-color: rgb(40, 182, 63);
  border-radius: 5px;
}
.main_text {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}
.side1 {
  width: 100%;
  height: 5px;
  background-color: rgba(95, 166, 207, 0.973);
  border-radius: 5px;
}
.side2 {
  width: 440px;
  height: 5px;
  background-color: rgb(247, 217, 48);
  border-radius: 5px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.side3 {
  width: 100%;
  height: 5px;
  background-color: rgb(158, 35, 4);
  border-radius: 5px;
}
.footer {
  height: 150px;
  width: 100%;
  background-color: rgb(187, 185, 185);
}
.footer_text {
  margin-left: 700px;
  margin-top: 50px;
}
.list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.list_img {
  background-color: rgb(241, 241, 241);
  width: 100%;
  height: 120px;
  margin-top: 20px;
  display: flex;
}
.list_image {
  height: 100%;
  width: 30%;
}
.list_text {
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 30px;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
}
.list_textcont {
  word-wrap: break-word;
  font-family: Hiragino Sans GB;
  font-weight: 550;
}
.list_time {
  margin-top: 40px;
}
.list_content {
  background-color: rgb(241, 241, 241);
  width: 100%;
  height: 90px;
  margin-top: 20px;
  display: flex;
  text-align: left;
  flex-direction: column;
}
.list_content1 {
  width: 100%;
  height: auto;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 16px;
}
.el-button {
  margin-right: 30px;
  font-size: 20px;
  margin-top: 20px;
}
.list_time {
  margin-top: 35px;
}
.list_time1 {
  margin-top: 15px;
}
.list_image {
  background-image: url('../../src/assets/04.jpg');
  height: 100%;
  width: 40%;
}
</style>
